<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: '/' }">
          电力仪表监控详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_center">
        <StrokeTitle2 title="功率监控" class="float margin" style="width: 99%" :isBetween="false">
          <div slot="content" class="boxcontent">
            <Nodata v-if="bottom.length<=0" />
            <div class="equipment" v-for="(items,indexs) in bottom" :key="indexs" v-else>
              <nav>{{items.name}}</nav>
              <div class="equipment_content">
                <div class="equipment_content_item flex_center" v-for="(item,index) in items.data" :key="index">
                  <div class="equipment_content_item_left">{{item.type}}</div>
                  <div class="equipment_content_item_right">{{item.value}}</div>
                </div>
                <!-- <div class="equipment_content_item flex_center">
                  <div class="equipment_content_item_left">总无功功率</div>
                  <div class="equipment_content_item_right">223</div>
                </div>
                <div class="equipment_content_item flex_center">
                  <div class="equipment_content_item_left">功率因数</div>
                  <div class="equipment_content_item_right">211</div>
                </div>
                <div class="equipment_content_item flex_center">
                  <div class="equipment_content_item_left">当日电量</div>
                  <div class="equipment_content_item_right">123</div>
                </div> -->
              </div>
            </div>

          </div>
        </StrokeTitle2>
      </div>

    </div>
  </div>
</template>

<script>
import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
import { GetVal, GetAllElectric, getEqpInfo } from "@/api/parcel/index.js";
export default {
  components: {
    StrokeTitle2,
  },
  data() {
    return {
      bottom: [], //功率监控
      //定时器
      timer: null,
    };
  },
  name: "Lcd",
  activated() {
    this.getAllElectric();
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.timer = setInterval(() => {
      this.getAllElectric();
    }, 10000);
  },
  deactivated() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    //功率监控
    getAllElectric() {
      GetAllElectric().then((res) => {
        this.bottom = res;
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.productionDesign_box {
  .content {
    .content_center {
      height: 98%;

      .boxcontent {
        width: 100%;
        height: 100%;
        overflow: auto;
        word-wrap: break-word;
        word-break: break-all;
        padding-bottom: 15px;
        .equipment {
          float: left;
          width: 19%;
          height: 225px;
          background-size: 100% 100%;
          background-image: url("~@/assets/images/lcd.png");
          margin: 0.83% 0 0 0.83%;
          nav {
            width: 100%;
            text-align: center;
            color: white;
            margin-top: 15.5px;
            font-size: 15px;
          }
          .equipment_content {
            width: 80%;
            height: 150px;
            margin: 15px 0 0 10%;
            .equipment_content_item {
              width: 100%;
              height: 21%;
              margin-top: 2%;
              .equipment_content_item_left,
              .equipment_content_item_right {
                width: 40%;
                height: 100%;
                text-align: center;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 13px;
              }
              .equipment_content_item_right {
                background-size: 100% 100%;
                color: #0afbfd;
                width: 60%;
                font-size: 14px;
                background-image: url("~@/assets/images/lcdBox.png");
              }
            }
          }
        }
      }
    }
  }
}
</style>